<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>By 裴鸿宇</title>
<style type="text/css">
body {
    margin:0px;
}
.top-area{
	margin-top:10px;
	width:990px;
	height:40px;
	border:1px solid #D3D3D3;
	background-color:#00FFFF;
}
/*--------*/
.main-area{
	overflow:hidden;
	margin-top:25px;
	font-size:17px;
	width:990px;
	height:auto;
	border:1px solid #D3D3D3;
}
.main{
	width:700px;
	height:auto;
	overflow:hidden;
	margin-top:20px;
	margin-bottom:10px;
	border:1px solid #D3D3D3;
}
.mine{
	float:left;
	width:120px;
}
.face{
	margin-top:5px;
	width:90px;
	height:80px;
	border:1px solid #99CCCC;
}
.name{
	overflow:hidden;
	width:90px;
	height:15px;
	line-height:15px;
	text-align:center;
	font-size:13px;
}
.infor{
	margin-top:10px;
	width:110px;
	height:20px;
	text-align:left;
	font-size:14px;
	overflow:hidden;
}
.friend_infor{
	float:left;
	width:550px;
	border-width:0px 0px 0px 1px;
	border-style:solid;
	border-color:#D3D3D3;
}
.all_name{
	width:580px;
	height:40px;
	line-height:40px;
	border-width:0px 0px 1px 0px;
	border-style:solid;
	border-color:#D3D3D3;
	background-color:#87CEFF;
}
.infor_name{
	cursor:pointer;
	float:left;
	font-size:15px;
	margin-top:10px;
	margin-left:30px;
	width:150px;
	height:20px;
	line-height:20px;
	border:1px solid #D3D3D3;
	background-color:#B0E2FF;
}
.baseMessage{
	margin-top:10px;
	width:480px;
	height:20px;
	line-height:20px;
}
.baseMessage_{
	height:auto;
	overflow:hidden;
}
.label{
	float:left;
	width:80px;
	height:18px;
	text-align:left;
	font-size:14px;
}
.infor1{
	margin-bottom:10px;
	width:480px;
	height:auto;
	display:block;
}
.infor2{
	display:none;
}
.infor3{
	display:none;
}
.message{
	float:left;
	font-size:14px;
	text-align:left;
	height:18px;
}
.message_{
	float:left;
	width:280px;
	font-size:14px;
	text-align:left;
}
.educate{
	width:480px;
	font-size:16px;
	font-weight:bold;
	height:20px;
	text-align:left;
}
.edu{
	text-align:right;
}
/*--------*/
.last-area{
	width:620px;
	height:90px;
	margin-top:20px;
	border:1px solid #D3D3D3;
}
/*--------*/
.clear_{
	clear:both;	
}
</style>
</head>
<body>
	<center>
		<div class="top-area"></div>
		
		<div class="main-area">
			<div class="main">
				<div class="mine">
					<img src="<%=request.getContextPath()%>/fileRedirect.action?toPage=stu/img/face/face.jpg" class="face">
					<div class="name">文王</div>
					<br/>
					<div class="infor">好友人数：123</div>
					<div class="infor">帖子数：23</div>
					<div class="infor">成果数：15</div>
				</div>
				
				<div class="friend_infor">
					<div class="all_name">
						<div id="infor_name1" class="infor_name" style="background-color:#A4D3EE;" onclick="change(1);setColor(1);">好友基本信息</div>
						<div id="infor_name2" class="infor_name" onclick="change(2);setColor(2);" >好友联系方式</div>
						<div id="infor_name3" class="infor_name" onclick="change(3);setColor(3);" >好友教育信息</div>
						<div class="clear_"></div>
					</div>
					<br/>
					<br/>
					<div id="infor1" class="infor1">
						<div class="baseMessage">
							<div class="label">昵称：</div>
							<div class="message">xxx</div>
						</div>
						<div class="baseMessage">
							<div class="label">个人技能：</div>
							<div class="message">xxx</div>
						</div>
						<div class="baseMessage">
							<div class="label">真实姓名：</div>
							<div class="message">xxx</div>
						</div>
						<div class="baseMessage">
							<div class="label">性别：</div>
							<div class="message">男</div>
						</div>
						<div class="baseMessage">
							<div class="label">生日：</div>
							<div class="message">1991年&nbsp;&nbsp;08月&nbsp;&nbsp;09日</div>
						</div>
						<div class="baseMessage">
							<div class="label">血型：</div>
							<div class="message">O&nbsp;型</div>
						</div>
						<div class="baseMessage">
							<div class="label">星座：</div>
							<div class="message">狮子座</div>
						</div>
						<div class="baseMessage">
							<div class="label">所在地：</div>
							<div class="message">四川省&nbsp;&nbsp;成都市</div>
						</div>
						<div class="baseMessage">
							<div class="label">故乡：</div>
							<div class="message">四川省&nbsp;&nbsp;成都市</div>
						</div>
						<div class="baseMessage baseMessage_">
							<div class="label">简介：</div>
							<div class="message_">我喜欢JAVA</div>
						</div>
					</div>
					
					<div id="infor2" class="infor1 infor2">
						<div class="baseMessage">
							<div class="label" style="font-size:16px;">QQ：</div>
							<div class="message">12345678</div>
						</div>
						<br/>
						<div class="baseMessage">
							<div class="label">邮箱：</div>
							<div class="message">12345678@qq.com</div>
						</div>
						<br/>
						<div class="baseMessage">
							<div class="label">手机：</div>
							<div class="message">12345678912</div>
						</div>
					</div>
					
					<div id="infor3" class="infor1 infor3">
						<div class="educate">大学经历：</div>
						<div class="baseMessage">
							<div class="label edu">学校名称：</div>
							<div class="message">xxx</div>
						</div>
						<div class="baseMessage">
							<div class="label edu">入学年份：</div>
							<div class="message">xxx</div>
						</div>
						<div class="baseMessage">
							<div class="label edu">院系：</div>
							<div class="message">xxx</div>
						</div>
						<br/>
						<div class="educate">高中经历：</div>
						<div class="baseMessage">
							<div class="label edu">学校名称：</div>
							<div class="message">xxx</div>
						</div>
						<div class="baseMessage">
							<div class="label edu">入学年份：</div>
							<div class="message">1991年&nbsp;&nbsp;08月&nbsp;&nbsp;09日</div>
						</div>
						<div class="baseMessage">
							<div class="label edu">班级：</div>
							<div class="message">xxxx</div>
						</div>
						<br/>
						<div class="educate">初中经历：</div>
						<div class="baseMessage">
							<div class="label edu">入学年份：</div>
							<div class="message">1991年&nbsp;&nbsp;08月&nbsp;&nbsp;09日</div>
						</div>
						<div class="baseMessage">
							<div class="label edu">班级：</div>
							<div class="message">xxx</div>
						</div>
					</div>
					
				</div>
				</div>
			</div>
		
		<div class="last-area"></div>
	</center>
</body>
</html>
<script type="text/javascript">
function change(n){
	if (n==1){
		document.getElementById("infor1").style.display="block";
		document.getElementById("infor2").style.display="none";
		document.getElementById("infor3").style.display="none";
	}
	if (n==2){
		document.getElementById("infor1").style.display="none";
		document.getElementById("infor2").style.display="block";
		document.getElementById("infor3").style.display="none";
	}
	if (n==3){
		document.getElementById("infor1").style.display="none";
		document.getElementById("infor2").style.display="none";
		document.getElementById("infor3").style.display="block";
	}
}

function setColor(n){
	if (n==1){
		document.getElementById("infor_name1").style.backgroundColor="#A4D3EE";
		document.getElementById("infor_name2").style.backgroundColor="#B0E2FF";
		document.getElementById("infor_name3").style.backgroundColor="#B0E2FF";
	}
	if (n==2){
		document.getElementById("infor_name1").style.backgroundColor="#B0E2FF";
		document.getElementById("infor_name2").style.backgroundColor="#A4D3EE";
		document.getElementById("infor_name3").style.backgroundColor="#B0E2FF";
	}
	if (n==3){
		document.getElementById("infor_name1").style.backgroundColor="#B0E2FF";
		document.getElementById("infor_name2").style.backgroundColor="#B0E2FF";
		document.getElementById("infor_name3").style.backgroundColor="#A4D3EE";
	}
}
</script>